<template>
  <view class="content_page" v-if="!showError">
    <view class="weather_box" :style="{ paddingBottom: globalFont == 'small_font' ? '0' : '10px' }">
      <div v-if="weatherRes">
        <div class="weather_box_top">
          <image :src="weatherList[weatherRes.icon]"></image>
          <div class="title">{{ weatherRes.temp }}℃</div>
        </div>
        <div class="weather_box_main">
          <div class="flex">
            <div :class="['top', globalFont]">{{ weatherRes.windDir
            }}({{ weatherRes.windLevel }}级)</div>
            <div :style="{ fontSize: globalFont == 'small_font' ? '24rpx' : '36rpx' }" class="btm">风速</div>
          </div>
          <div class="flex">
            <div :class="['top', globalFont]">{{ weatherRes.humidity }} %</div>
            <div :class="['btm', globalFont]">室外湿度</div>
          </div>
        </div>
      </div>
    </view>
    <view style="padding: 40rpx;">
      <view class="Statue_first flex_between">
        <div class="status_box flex_center_center">
          <image src="/static/home/4G.png" mode=""></image>
          <div  :class="['box_right', globalFont]">
            <view class="text"> {{ processSignal(dataList.signal) }} </view>
            <view class="info"> 4G信号 </view>
          </div>
        </div>
        <div class="status_box flex_center_center">
          <image src="/static/home/time.png" mode=""></image>
          <div :class="['box_right', globalFont]"> 
            <view class="text"> {{ dataList.workedHour || '0' }}小时 </view>
            <view class="info"> 工作时长 </view>
          </div>
        </div>
      </view>
      <div  :class="['status_second', globalFont]">
        <div class="runtime next">
          下次运行：{{ dataList.nextWorkTime?.slice(0, 16) }}
        </div>
        <div class="runtime before">
          上次保养：{{
            dataList.lastMaintenanceTime
              ? dataList.lastMaintenanceTime?.slice(0, 16)
              : "无"
          }}
        </div>
      </div>
      <div  :class="['status_third', globalFont]">
        <div class="norequire" v-if="!dataList.maintenanceMsg">
          设备暂无需保养
        </div>
        <div class="isrequire" v-else>
          <div class="tipmessage">
            {{ dataList.maintenanceMsg }}
          </div>
          <div class="tipbtn" @click="tomaintenance" :class="['tipbtn', globalFont]">保养</div>
        </div>
      </div>
      <div :class="['status_third', globalFont]">
        <div class="nowarning" v-if="!dataList.equipmentError">设备无告警信息</div>
        <div class="iswarning" v-else>
          <div class="warning_top flex_between">
            <div class="flex_center">
              <image src="/static/home/icon_jingao.png" mode=""></image>
              <div class="tip">设备告警信息</div>
            </div>
            <div class="more_btn" @click="toMore" :class="['more_btn', globalFont]">查看更多</div>
          </div>
          <div class="tipmessage">
            <p>{{ dataList.equipmentError.errorMsg }}</p>
            <p style="margin-top: 10px;">{{ dataList.equipmentError.createTime }}</p>
          </div>
        </div>
      </div>
    </view>
    <div class="status_modal">
      <up-modal :show="show" title="提示" :content="`下次保养为工作${dataList.NextMaintenance}小时，请留意保养提示`"
        @confirm="confirmModal"></up-modal>
    </div>
  </view>
  <view  v-if="showError" :class="['content_page_error', globalFont]">
    <image src="/src/static/Index/error.png"></image>
    <div class="text">设备出现异常，无法查看详情请联系设备管理员</div>
    <div class="content_page_btn">
      <div class="one" @click="getStatusData">再试一次</div>
    </div>
  </view>
</template>

<script setup lang="ts">
import { weatherList } from "../utils/configData.js";
import { ref, onMounted, defineProps, onUnmounted,getCurrentInstance } from "vue";
import type { deviceDetailType } from "@/api/detail/type.ts";
import { deviceDetail, MaintenanceFn } from "../api/detail/detail.ts";
import { getWeatherInfo } from "../api/index/index.ts";
const propData = defineProps(["equipmentId", "lat", 'lng']);
const dataList = ref<deviceDetailType>({
  equipmentId: '',
  equipmentNo: "",
  equipmentName: "",
  categoryName: "",
  installLocation: "",
  groupId: '',
  groupName: "",
  signal: 0,
  workedHour: 0,
  nextWorkTime: "",
  lastMaintenanceTime: "",
  warnMsg: "",
  warnStatus: false,
  maintenanceStatus: false,
  maintenanceMsg: "",
  maintenanceHour: 0,
});

// 获取数据
const showError = ref(false);
const getStatusData = () => {
  // uni.showLoading({
  //   title: "接收中...",
  //   mask: true
  // })
  // dataList.value = {
  //   equipmentId: 3,
  //   equipmentNo: "1212",
  //   equipmentName: "equipmentName",
  //   categoryName: "categoryName",
  //   installLocation: "installLocation",
  //   groupId: null,
  //   groupName: "",
  //   signal: 15,
  //   workedHour: 2,
  //   nextWorkTime: "2024-12-20 12:20:40",
  //   lastMaintenanceTime: "2024-11-20 11:10:40",
  //   warnMsg: "机器故障，请联系管理员处理！",
  //   // equipmentError: null,
  //   maintenanceStatus: true,
  //   maintenanceMsg: "设备已运行50小时，请更换泵头润滑油并检查过滤瓶滤芯！",
  //   maintenanceHour: 90,
  //   errorMsg: '告警信息告警信息告警信息告警信心',
  //   equipmentError: {
  //     errorMsg: '告警信息告警信息告警信息告警信心',
  //     createTime:'2321434'
  //   }
  // };
  // return
  deviceDetail(dataList.value.equipmentId)
    .then((res: any) => {
      if (res.resultStatus) {
        dataList.value = res.resultData;
        dataList.value.NextMaintenance = Number((dataList.value.workedHour || 0)) + 300;
      } else {
        uni.showToast({
          title: res.errorMessage,
          icon: "none",
        });
      }
    })
    .catch((err: any) => {
      showError.value = true;
      uni.showToast({
        title: "服务器异常",
        icon: "none",
      });
    }).finally(() => {
      // setTimeout(()=>{
      //   uni.hideLoading()
      // },1000)
    });
};
const show = ref<boolean>(false);
const tomaintenance = () => {
  show.value = true;
};
// 处理数据
const processSignal = (signal: number): string => {
  if (!signal) {
    return '离线'
  }
  if (signal >= 0 && signal <= 11) {
    return "弱";
  } else if (signal >= 12 && signal <= 21) {
    return "较弱";
  } else if (signal >= 22) {
    return "强";
  } else {
    return "离线";
  }
};
const confirmModal = () => {
  MaintenanceFn(dataList.value.equipmentId).then((res: any) => {
    if (res.resultStatus) {
      uni.showToast({
        title: "设备保养成功",
        icon: "none"
      })
      getStatusData();
    } else {
      uni.showToast({
        title: res.errorMessage,
        icon: "none"
      })
    }
  }).catch((err: any) => {
    uni.showToast({
      title: "服务器异常",
      icon: "none"
    })
  }).finally(() => {
    show.value = false;
  })
};
const toMore = () => {
  uni.navigateTo({
    url: "/pages/toTab/warningInfo"
  })
}
// 获取天气
const weatherRes = ref()
const getWeather = () => {
  getWeatherInfo({
    lat: propData.lat,
    lng: propData.lng
  }).then((res: any) => {
    if (res.resultStatus) {
      weatherRes.value = res.resultData;
    } else {
      uni.showToast({
        title: res.errorMessage,
        icon: 'none'
      })
    }
  }).catch((err: any) => {
    uni.showToast({
      title: "服务器异常",
      icon: 'none'
    })
  })
}
const intervalId = ref()
const globalFont = ref()
const instance = getCurrentInstance();
const appStorage = instance?.appContext.config.globalProperties.appStorage;
onMounted(() => {
  const userInfo = appStorage.getObj("userInfo_key");
  globalFont.value = userInfo.smallFont
  dataList.value.equipmentId = propData.equipmentId;
  getStatusData();
  getWeather()
  intervalId.value = setInterval(() => {
    getStatusData();
  }, 60000);
});
onUnmounted(() => {
  clearInterval(intervalId.value);
});
</script>
<style scoped lang="scss">
:root {
  /* 默认字号 */
  --font-size-small: 26rpx;
  // 默认radio自豪
  --font-size-radio-small: 20rpx;
  /* 中号字号 */
  --font-size-medium: 32rpx;
  --font-size-large: 40rpx;
  /* 大号字号 */
}

.small_font {
  font-size: var(--font-size-small);
}

.small-medium {
  font-size: var(--font-size-medium);
}

.small-large {
  font-size: var(--font-size-large);
}

.content_page {
  background: #ffffff;
  &_btn {
    margin: 110rpx auto;
    .one {
      width: 500rpx;
      height: 88rpx;
      background: linear-gradient(90deg, #00a67e, #006d56);
      line-height: 88rpx;
      text-align: center;
      border-radius: 44rpx;
      margin-bottom: 30rpx;
      color: #fff;
    }
  }
  .weather_box {
    background: url("/static/Index/bj2.png");
    background-size: cover;
    width: 100%;
    height: 300rpx;
    // margin: 38rpx auto 0;
    font-weight: bold;
    text-align: left;
    display: flex;
    flex-direction: column;

    .scope_box {
      padding: 52rpx 0 0 40rpx;
      width: 414rpx;
      .title {
        font-size: 24rpx;
        color: #7d8c91;
        line-height: 20px;
        text-align: left;
      }
      .btn {
        width: 172rpx;
        height: 64rpx;
        opacity: 0.46;
        background: #000000;
        border-radius: 32rpx;
        opacity: 0.46;
        background: #000000;
        margin-top: 48rpx;
        color: #ffffff;
        text-align: center;
        line-height: 64rpx;
        font-size: 24rpx;;
      } 
    }
    /* 让天气顶部和底部垂直布局 */
    .weather_box_top {
      margin-top: 22px;
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 50%;
      /* 限制顶部盒子的高度，防止它撑大父盒子 */
      image {
        width: 52px;
        height: 52px;
        margin-left: 40px;
      }
      .title {
        color: #333;
        font-size: 38px;
        font-weight: bold;
        margin-left: 34px;
      }
    }
    .weather_box_main {
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 50%;

      .flex {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        text-align: left;

        .top {
          // font-size: 24rpx;;
          font-weight: bold;
          color: #7d8c91;
          margin-bottom: 6rpx;
        }

        .btm {
          // font-size: 24rpx;;
          color: #7d8c91;
          font-weight: normal;
        }
      }
    }
  }

  .Statue_first {
    .status_box {
      // margin-right: 130rpx;

      image {
        width: 80rpx;
        height: 80rpx;
        margin-right: 30rpx;
      }

      .box_right {
        height: 80rpx;
        text-align: left;

        .text {
          // font-size: 24rpx;
          color: #333333;
          line-height: 44rpx;
          margin-bottom: 3rpx;
          text-align: left;
          font-weight: bold;
          margin-bottom: 10rpx;
        }

        .info {
          // font-size: 24rpx;
          font-weight: Regular;
          text-align: left;
          color: #333333;
          line-height: 32rpx;
        }
      }
    }
  }

  .status_second {
    margin: 48rpx 0 0 0;

    .runtime {
      // font-size: 24rpx;
      color: #333;
      line-height: 40rpx;
    }

    .next {
      margin-bottom: 16rpx;
    }

    .before {
      margin-bottom: 50rpx;
    }
  }

  .status_third {
    padding: 48rpx 0;
    background-color: #fff;
    border-top: 2rpx solid #eeeeee;

    .norequire {
      // font-size: 24rpx;
      color: #333;
      line-height: 40rpx;
    }

    .nowarning {
      // font-size: 24rpx;
      color: #333;
      line-height: 40rpx;
    }

    .isrequire {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .tipmessage {
        width: 466rpx;
        // font-size: 24rpx;
        font-weight: Regular;
        text-align: left;
        color: #333333;
        line-height: 20px;
      }

      .tipbtn {
        width: 192rpx;
        height: 64rpx;
        background: linear-gradient(90deg, #00a67e, #006d56);
        border-radius: 32rpx;
        line-height: 64rpx;
        text-align: center;
        // font-size: 24rpx;
        color: #fff;
      }
    }

    .iswarning {
      .warning_top {
        image {
          width: 32rpx;
          height: 32rpx;
          margin-right: 16rpx;
        }
        .more_btn{
          // font-size: 24rpx;
          color: #00a67e;
        }

        .tip {
          // font-size: 24rpx;
          font-weight: bold;
          text-align: left;
          color: #333333;
          line-height: 44rpx;
        }
      }

      .tipmessage {
        // font-size: 24rpx;
        font-weight: Regular;
        text-align: left;
        color: #333333;
        line-height: 20px;
        margin-top: 20rpx;
      }
    }
  }
}

.content_page_error {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background: #f5f6f7;

  image {
    width: 280rpx;
    height: 220rpx;
    margin-top: 160rpx;
  }

  .text {
    width: 300rpx;
    height: 80rpx;
    // font-size: 26rpx;
    text-align: center;
    color: #999999;
    line-height: 40rpx;
  }
}
</style>
